import { Button } from 'antd';
import type React from 'react';
import { useRef } from 'react';
import {
  attachLine,
  detachLine,
  getLine,
} from '@/components/MapView/Mapless/mana/line';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const lManIntervalRef = useRef<NodeJS.Timeout>(undefined);

  const onDrawLines = () => {
    const lMan = attachLine(maplessRef.current, 'lm1');
    lMan?.drawLines([
      {
        id: 'line1',
        longitude: 113.274,
        latitude: 23.136,
        azimuth: 45, // 东北方向
        lineLength: 1000, // 1公里
      },
      {
        id: 'line2',
        longitude: 113.265,
        latitude: 23.13,
        azimuth: 135, // 东南方向
        lineLength: 1500, // 1.5公里
      },
    ]);
  };

  const onStartUpdateLines = () => {
    const lMan = getLine(maplessRef.current, 'lm1');
    if (lMan && !lManIntervalRef.current) {
      lManIntervalRef.current = setInterval(() => {
        lMan?.updateLine({ id: 'line1', azimuth: Math.random() * 360 });
      }, 100);
    }
  };

  const onStopUpdateLines = () => {
    clearInterval(lManIntervalRef.current);
    lManIntervalRef.current = undefined;
  };

  const onShowLine = () => {
    const lMan1 = getLine(maplessRef.current, 'lm1');
    lMan1?.setVisible(!lMan1.IsVisible);
  };

  const onClearLines = () => {
    detachLine(maplessRef.current, 'lm1');
    if (lManIntervalRef.current) {
      clearInterval(lManIntervalRef.current);
      lManIntervalRef.current = undefined;
    }
  };

  return (
    <div className={styles.test}>
      <Button onClick={onDrawLines}>绘制线条</Button>
      <Button onClick={onStartUpdateLines}>开始更新线条</Button>
      <Button onClick={onStopUpdateLines}>停止更新线条</Button>
      <Button onClick={onShowLine}>显示/隐藏</Button>
      <Button onClick={onClearLines}>清除线条</Button>
    </div>
  );
};

export default Index;
